import useEchartsGraph from "./common/useEchartsGraph"
import echartsUtil from "@/utils/echarts.util"
import useHighchartsGraph from "./common/useHighchartsGraph"

/**
 * Created by baidm in 2022/5/4 on 8:42
 */
const {initChart} = useEchartsGraph()
const {init3DChart} = useHighchartsGraph()

export default function () {
    // 初始化销售数据按月份柱状图
    const initBar = (elementId, chartData) => {
        let {name, data, xAxisData} = chartData
        const textStyle = {
            fontSize: 12,
            fontFamily: "MicrosoftYaHei",
            color: "#1bcaf2"
        }
        let option = {
            color: ["#1bb3d5"],
            grid: {
                left: '0%',
                right: '0%',
                bottom: '0%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: '{a}</br>{b}: {c}',
                backgroundColor: '#05507b',
                borderColor: "#1bcaf2",
                textStyle
            },
            legend: {
                top: "5%",
                right: "right",
                textStyle
            },
            xAxis: {
                type: 'category',
                data: xAxisData,
                axisLabel: textStyle,
                axisLine: {
                    lineStyle: {
                        color: "#1bcaf2",
                    }
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: textStyle,
                splitLine: {
                    lineStyle: {
                        color: "#1bcaf2",
                    }
                }
            },
            series: echartsUtil.getBarWith3DSeries({name, data, textStyle})
        };

        return initChart(elementId, option)
    }

    // 初始化商品分类3D饼图
    const initCategoryChart = (elementId, chartData) => {
        let {name, data} = chartData
        const textStyle = {"color": "#fff", "fontSize": "12px", "fontWeight": "bold", "fontFamily": "微软雅黑"}

        const option = {
            colors: ["#1999d5", "#06bb70", "#b381ff", "#ff8989", "#f3bd76"],
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45
                }
            },
            title: {
                text: null
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 0,
                y: 10,
                itemMarginBottom: 15,
                itemStyle: textStyle,
                itemHoverStyle: {"color": "#fff"}
            },
            tooltip: {
                backgroundColor: "transparent",
                style: textStyle
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}: <i style="color:#10d5df">{point.percentage:.1f} %</i></b>',
                        style: {
                            color: "#fff",
                        }
                    },
                    showInLegend: true,
                    innerSize: 60,
                    depth: 45,
                }
            },
            series: [
                {
                    name,
                    data
                }
            ]
        }

        return init3DChart(elementId, option)
    }

    // 初始化销售属性按比例3D饼图
    const initPropertyChart = (elementId, chartData) => {
        let {name, data} = chartData
        const textStyle = {"color": "#fff", "fontSize": "12px", "fontWeight": "bold", "fontFamily": "微软雅黑"}

        const option = {
            colors: ["#1999d5", "#b381ff"],
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 75,
                    beta: 0
                }
            },
            title: {
                text: null
            },
            tooltip: {
                backgroundColor: "transparent",
                style: textStyle
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth: 35,
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}: <i style="color:#10d5df">{point.percentage:.1f} %</i></b>',
                        style: {
                            color: "#fff",
                        }
                    }
                }
            },
            series: [
                {
                    type: 'pie',
                    name,
                    data
                }
            ]
        }

        return init3DChart(elementId, option)
    }

    // 初始化按商品品质分析3D金字塔图
    const initQualityChart = (elementId, chartData) => {
        let {name, data} = chartData
        const textStyle = {"color": "#fff", "fontSize": "12px", "fontWeight": "bold", "fontFamily": "微软雅黑"}

        const option = {
            colors: ["#28f8c3", "#4b78f2", "#8540f6", "#cda01e"],
            chart: {
                type: 'pyramid3d',
                options3d: {
                    enabled: true,
                    alpha: 10,
                    depth: 50,
                    viewDistance: 50
                }
            },
            title: {
                text: null
            },
            tooltip: {
                backgroundColor: "transparent",
                style: textStyle
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}: <i style="color:#10d5df">{point.percentage:.1f} %</i></b>',
                        style: {
                            color: "#fff",
                        },
                        allowOverlap: true,
                        x: -80,
                        y: 0,
                        align: 'left',
                        verticalAlign: 'top',
                        // textPath: {
                        //     enabled: true,
                        //     attributes: {
                        //         'stroke': '#ff0000', // basic
                        //         'stroke-width': 1, // hyphenated
                        //         'd': ['M', 10,] // path definition, note format
                        //     }
                        // }
                    },
                    width: '30%',
                    height: '80%',
                    center: ['70%', '50%']
                }
            },
            series: [
                {
                    name,
                    data
                }
            ]
        }

        return init3DChart(elementId, option)
    }

    return {
        initBar,
        initCategoryChart,
        initPropertyChart,
        initQualityChart
    }
}